{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <link href="{% static 'plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.js' %}"></script>
</head>
<body>
<div class="container">
    <h1>书籍展示</h1>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <a href="{% url 'add_book' %}" class="btn btn-primary">添加书籍</a>
            <table style="margin-top:10px" class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>书籍名称</th>
                    <th>价格</th>
                    <th>出版日期</th>
                    <th>出版社</th>
                    <th>作者</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for book in books %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ book.title }}</td>
                        <td>{{ book.price }}</td>
                        <td>{{ book.pub_date|date:"Y-m-d" }}</td>
                        <td>{{ book.pub.name }}</td>
                        <td>{{ book.get_all_author }}</td>
                        <td style="text-align: center;">
                            <a href="{% url 'edit_book' book.pk %}" class="btn btn-warning">编辑</a>
                            <a href="{% url 'del_book' book.pk %}" class="btn btn-danger" name="">删除</a>
                            <span style="display: none">{{ book.pk }}</span>
                            <a class="btn btn-success del" name="">ajax删除</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <button class="btn btn-success pull-right">提交</button>
        </div>
    </div>

</div>
</body>
<script>
    $(".del").on("click", function () {
        var del_id = $(this).prev().text();
        console.log('/ajax_del_book/' + del_id + '/');
        var ths = $(this);
        swal({
                title: "are you sure?",
                text: "要谨慎！",
                type: "warning",
                showConfirmButton: true,
                showCancelButton: true, //是否显示取消按钮
                confirmButtonClass: "btn-danger",
                confirmButtonText: "确定删除", //确定按钮内容
                cancelButtonText: "容我三思", //取消按钮内容
                closeOnConfirm: false  //点击返回上一步操作
            },
            function () {
                $.ajax({
                    url: '/ajax_del_book/' + del_id + '/',
                    type: 'get',
                    data: del_id,
                    success: function (res) {
                        if (res === 'ok') {
                            // 关闭弹框
                            swal("删除成功!", "", "success");

                            // 局部刷新，删除对应记录
                            ths.parent().parent().remove();
                            // console.log(ths) // 调用外部的this
                            // location.reload()  // 全局页面刷新
                        } else {
                            console.log("出错了")
                        }
                    },
                    error: function (res) {
                        if (res.status === 404){
                            swal("删除失败!",res.responseText,'error')
                            // res.responseText  是后台响应回来的错误信息
                        }
                    }
                })

            });
    })
</script>
</html>